<template>
    <div>
        <a-modal
            v-model:visible="visible"
            title="反馈缺陷项"
            @ok="handleOk"
            width="800px"
            wrapClassName="feedbackDefects-full-modal"
            :footer="null"
        >
                <div style="display: flex;" >
                    <div style="width: 30%;" v-if="wjList.length > 1" >
                        <div v-for="(item,index) in wjList" :key="index" class="feedbackDefects-wj-box">
                            <span class="mc-text" :class="selectItem.id == item.id?'select-item-box':''" @click="selectionFlieChange(item)">
                                {{ item.fwjxsmc+item.fwjlx }}
                                <a-icon type="download" class="toolbox-download-icon-type" style="color: #2F54EB;font-size:16px;padding-left: 5px;" @click.top.prevent="downloadFiles(item)"/>
                            </span>
                        </div>
                    </div>
                    
                    <div style="flex: 1;" >
                        <div v-for="(item,index) in wjList" :key="index" class="feedbackDefects-wj-box" v-if="wjList.length == 1">
                            <span class="mc-text" :class="selectItem.id == item.id?'select-item-box':''" @click="selectionFlieChange(item)">
                                {{ item.fwjxsmc+item.fwjlx }}
                                <a-icon type="download" class="toolbox-download-icon-type" style="color: #2F54EB;font-size:16px;padding-left: 5px;" @click.top.prevent="downloadFiles(item)"/>
                            </span>
                        </div>
                        <a-spin tip="正在加载中..." :spinning="spinning">
                            <div v-if="programDataiframeSrc" style="margin-left: 10px;">
                                <iframe 
                                    :key="iframeKey"
                                    :src="programDataiframeSrc" 
                                    ref="iframeServerEditingRef" 
                                    scrolling="auto" 
                                    width="100%"
                                    :height="wjList.length == 1?(windowInnerHeight -125 ):(windowInnerHeight -75 )+'px'"
                                    style="border: 0;"
                                ></iframe>
                            </div>
                            <div v-else>
                                <a-empty description="暂无文件或文件发生错误！"/>
                            </div> 
                        </a-spin>
                        
                    </div>
                </div>
        </a-modal>
    </div>
</template>
<script>
import YchConstant from "@/api/YchConstant";
import { spcygetXcjcqxbgFile, openFileReadOnly, spcySqsxWjjlgetLocalFileById } from './service/index'
import blobType from '@/common/blobType'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            iframeKey:null,
            programDataiframeSrc:'',
            windowInnerHeight:window.innerHeight,
            visible:false,
            currentData:{},
            spinning:false,
            wjList:[],
            selectItem:{}
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            this.currentData = row
            spcygetXcjcqxbgFile(row).then(res=>{
                if(res.code == 200){
                    //console.log(res.result)
                    this.wjList = res.result
                    if(this.wjList.length){
                        this.selectionFlieChange(res.result[0])
                        
                    }else{
                        this.programDataiframeSrc = ''
                        this.spinning = false
                        this.selectItem = {}
                    }
                    
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selectionFlieChange(row){
            this.selectItem = row
            this.spinning = true
            if(row.fwjlx == '.doc' || row.fwjlx == '.docx'){
                openFileReadOnly({id:row.id}).then(res=>{
                    if(res.code == 200){
                        //console.log('我一直在请求吗？',res.result.wordUrl)
                        this.programDataiframeSrc = res.result.wordUrl
                    }else{
                        this.programDataiframeSrc = ''
                    }
                    this.spinning = false
                })
                
            }else{
                this.programDataiframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcyRsWjmb/openWjjl?id='+row.id
                this.spinning = false
            }
            this.iframeKey = Date.now()
        },
        downloadFiles(val){//下载
            var that = this
            
            var fileName = val.fwjxsmc?val.fwjxsmc:val.fwjccmc
            let param = { fywflcode:'001002',id:val.id,sqsxid:this.currentData.sqsxid}
            spcySqsxWjjlgetLocalFileById(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        handleOk(){

        }
    }
}
</script>
<style lang="less">
.feedbackDefects-full-modal{
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0 auto;
  }
  .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
  }
  .ant-modal-body {
     flex: 1;
     padding: 8px;
  }
  .feedbackDefects-wj-box{
    margin-bottom: 10px;
    .mc-text{
        display: inline-block;
        align-items: center;
        flex-wrap: wrap;
        padding: 3px 5px;
        border-radius: 15px;
        border: 1px solid #d9d9d9;
        
        
    }
    .select-item-box{
        display: inline-block;
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        border: 3px solid #ff9200;
        color: #2F54EB !important;
    }
  }
}
</style>